<template>
  <div class="flex height-100 content-with-tree">
    <div class="flex direction-column height-100 right-content">
      <div class="search-form">
        <el-form inline>
          <el-form-item label="月份范围">
            <el-date-picker
              type="monthrange" v-model="monthrange"
              range-separator="至" start-placeholder="开始月份" end-placeholder="结束月份"
              format="yyyy-MM" value-format="yyyy-MM"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="所属区域">
            <el-select v-model="area">
              <el-option
                v-for="option in options" :key="option.value"
                :label="option.name" :value="option.code"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关键字">
            <el-input v-model="keyword"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <el-table
        v-loading="loading" :data="lists" height="100%"
        :header-cell-style="{
          backgroundColor: themeColor,
          color: 'white',
          textAlign: 'center'
        }"
        :cell-style="{
          textAlign: 'center'
        }"
      >
        <el-table-column v-for="column in columns" :key="column.label" v-bind="column">
          <template v-if="column.children">
            <el-table-column v-for="child in column.children" :key="child.label" v-bind="child">
              <template v-if="child.children">
                <el-table-column v-for="cc in child.children" :key="cc.prop" v-bind="cc"></el-table-column>
              </template>
            </el-table-column>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
export default {
  name: 'energy-efficiency-analysis-comprehensive',
  data () {
    const end = this.$dayjs().format('YYYY-MM')
    const start = this.$dayjs().subtract(1, 'year').format('YYYY-MM')
    return {
      monthrange: [start, end],
      keyword: '',
      loading: false,
      area: '',
      lists: [],
      columns: [
        {
          label: '行业',
          prop: 'col1'
        },
        {
          label: '企业名称',
          prop: 'enterprise'
        },
        {
          label: '能耗指标',
          children: [
            {
              label: '综合能源消费量',
              children: [
                {
                  label: '本期',
                  prop: 'col2'
                },
                {
                  label: '同比',
                  prop: 'col3'
                },
              ]
            },
            {
              label: '碳排放',
              children: [
                {
                  label: '本期',
                  prop: 'col4'
                },
                {
                  label: '同比',
                  prop: 'col5'
                },
              ]
            },
            {
              label: '工业总产量',
              children: [
                {
                  label: '本期',
                  prop: 'col6'
                },
                {
                  label: '同比',
                  prop: 'col7'
                },
              ]
            },
            {
              label: '产值单耗',
              children: [
                {
                  label: '本期',
                  prop: 'col8'
                },
                {
                  label: '同比',
                  prop: 'col9'
                },
              ]
            },
            {
              label: '电耗量',
              children: [
                {
                  label: '本期',
                  prop: 'col10'
                },
                {
                  label: '同比',
                  prop: 'col11'
                },
              ]
            },
            {
              label: '煤耗量',
              children: [
                {
                  label: '本期',
                  prop: 'col12'
                },
                {
                  label: '同比',
                  prop: 'col13'
                },
              ]
            },
            {
              label: '天然气耗量',
              children: [
                {
                  label: '本期',
                  prop: 'col14'
                },
                {
                  label: '同比',
                  prop: 'col15'
                },
              ]
            },
            {
              label: '原油耗量',
              children: [
                {
                  label: '本期',
                  prop: 'col16'
                },
                {
                  label: '同比',
                  prop: 'col17'
                },
              ]
            },
            {
              label: '能源消费总量',
              children: [
                {
                  label: '本期',
                  prop: 'col18'
                },
                {
                  label: '同比',
                  prop: 'col19'
                },
              ]
            },
          ]
        }
      ],
      pagination: {
        pageNumber: 1,
        pageSize: 12,
        total: 0
      }
    }
  },
  computed: {
    themeColor () {
      return this.$store.state.user.theme
    },
    options () {
      return this.$store.getters['user/districts']
    },
    qs () {
      const daterange = this.daterange
      return {
        keyword: this.keyword,
        start: daterange[0],
        end: daterange[1]
      }
    }
  },
  mounted () {
    this.getLists()
  },
  methods: {
    getLists () {
      this.loading = true
      // TODO
      const rand = () => Math.round(Math.random() * 99 + 1)
      return new Promise((resolve) => {
        setTimeout(() => {
          resolve()
          this.pagination.total = 300
          this.loading = false
          this.lists = [
            ...Array(25).fill(1).map((v, i) => ({
              id: i + 1,
              enterprise: rand(),
              col1: rand(),
              col2: rand(),
              col3: rand(),
              col4: rand(),
              col5: rand(),
              col6: rand(),
              col7: rand(),
              col8: rand(),
              col9: rand(),
              col10: rand(),
              col11: rand(),
              col12: rand(),
              col13: rand(),
              col14: rand(),
              col15: rand(),
              col16: rand(),
              col17: rand(),
              col18: rand(),
              col19: rand()
            }))
          ]
        }, 300)
      })
    },
    onSearch () {
      this.pagination.pageNumber = 1
      this.$nextTick(() => {
        this.getLists()
      })
    },
    onNodeClick () {
      this.onSearch()
    }
  }
}
</script>

<style scoped>

</style>
